<template>
	<xn-form-container
		title="质检详情"
		width="90%"
		:visible="visible"
		:destroy-on-close="true"
		@close="onClose"
	>
		<div class="outside-box">
			<a-row :gutter="20">
				<a-col :span="6">
					<a-card title="AI推理过程" :style="{ height: calcAiBoxHeight, border:'1px #ccc solid'}" >
						{{ aiReason }}
					</a-card>
				</a-col>
				<a-col :span="10">
					<div class="lt-box">
						<Audio :audioUrl="audioUrl" :isStop="isStop"/>
					</div>
					<div class="lb-box" :style="{ height: calcLeftBoxHeight }">
						<div
							v-for="(message, index) in messageList"
							:key="index"
							:class="['message', message.speakerRole === 1 ? 'position-left' : 'position-right']"
						>
							<div :class="['message-header', message.speakerRole === 1 ? 'user-header' : 'sys-header']">
								{{
									message.speakerRole === 1 ? '客户' : '系统'
								}}&nbsp;&nbsp;&nbsp;&nbsp;{{ message.chatTime }}
							</div>
							<div
								style="white-space: pre-line;"
								:class="['message-content', message.speakerRole === 1 ? 'user-text-box' : 'sys-text-box']"
							>
								{{ message.content }}
							</div>
						</div>
					</div>
				</a-col>
				<a-col :span="8">
					<a-descriptions title="话单详情" size="small" layout="vertical" bordered>
						<a-descriptions-item label="通话序列号">{{ callRecord.callId }}</a-descriptions-item>
						<a-descriptions-item label="被叫">{{ callRecord.callee }}</a-descriptions-item>
						<a-descriptions-item label="通话类型">{{ callRecord.callTypeName }}</a-descriptions-item>
						<a-descriptions-item label="所属公司">{{ callRecord.deptName }}</a-descriptions-item>
						<a-descriptions-item label="坐席账号">{{ callRecord.agentNum }}</a-descriptions-item>
						<a-descriptions-item label="坐席姓名">{{ callRecord.userName }}</a-descriptions-item>
					</a-descriptions>
					<br/>
					<a-descriptions title="质检审核" size="small" bordered>
						<a-descriptions-item label="审核状态" :span="24">
							<a-select
								v-model:value="qualityFormData.qualityApproveStatus"
								:disabled="qualityApproveDisabled"
								style="width: 40%"
								placeholder="请选择问题方"
								:options="voiceCheckStatusOptions"/>
						</a-descriptions-item>
						<a-descriptions-item label="审核备注" :span="24">
							<a-textarea
								v-model:value="qualityFormData.qualityApproveRemark"
								:disabled="qualityApproveDisabled"
								placeholder="请输入审核备注"
								:auto-size="{ minRows: 4, maxRows: 8 }"/>
						</a-descriptions-item>
					</a-descriptions>
					<a-button type="primary" class="mt-3"
							  v-if="!qualityApproveDisabled && hasPerm('violationQualityApproveBtn')"
							  :loading="saveApproveStatusLoading"
							  @click="saveApproveStatus('quality')">
						保存
					</a-button>
					<br/>
					<br/>
					<a-descriptions title="主管审核" size="small" bordered>
						<a-descriptions-item label="审核状态" :span="24">
							<a-select
								v-model:value="supervisorFormData.supervisorApproveStatus"
								:disabled="supervisorApproveDisabled"
								style="width: 40%"
								placeholder="请选择问题方"
								:options="voiceCheckStatusOptions"/>
							<a-button class="ml-4" type="primary" danger @click="modalVisible = true"
									  v-if="(supervisorFormData.supervisorApproveStatus === '1' || supervisorFormData.supervisorApproveStatus === '3') && !supervisorApproveDisabled">
								客户拉黑
							</a-button>
						</a-descriptions-item>
						<a-descriptions-item label="审核备注" :span="24">
							<a-textarea
								v-model:value="supervisorFormData.supervisorApproveRemark"
								:disabled="supervisorApproveDisabled"
								placeholder="请输入审核备注"
								:auto-size="{ minRows: 4, maxRows: 8 }"/>
						</a-descriptions-item>
					</a-descriptions>
					<a-button type="primary" class="mt-3"
							  v-if="!supervisorApproveDisabled && hasPerm('violationSupervisorApproveBtn')"
							  :loading="saveApproveStatusLoading"
							  @click="saveApproveStatus('supervisor')">保存
					</a-button>
				</a-col>
			</a-row>
		</div>
		<a-modal
			v-model:open="modalVisible"
			title="客户拉黑"
			:width="500"
			:mask-closable="false"
			:destroy-on-close="true"
			@ok="handleOk"
			@cancel="handleClose"
		>
			<a-form ref="modalFormRef" :model="modalFormData" :rules="modalFormRules" layout="vertical">
				<a-form-item label="重要程度：" name="complainImportant">
					<a-select
						v-model:value="modalFormData.complainImportant"
						placeholder="请选择投诉重要程度"
						:options="complaintsImportanceOptions"/>
				</a-form-item>
				<CompanySelect itemType="project" colSpan="24" :data-form="modalFormData" :is-reset="resetProject"
							   @change-company-select-event="changeCompanySelectEvent"/>
				<a-form-item label="投诉内容：" name="complainContent">
					<a-textarea
						v-model:value="modalFormData.complainContent"
						:auto-size="{ minRows: 4, maxRows: 8 }"
						placeholder="请输入投诉内容"
						allow-clear
					/>
				</a-form-item>
			</a-form>
		</a-modal>
	</xn-form-container>
</template>

<script setup>
import {computed} from 'vue';
import voiceTextApi from '@/api/qc/voice/text/voiceTextApi';
import Audio from "@/components/AudioView/index.vue";
import htApi from "@/api/tjzy/call/ht/htApi";
import tool from "@/utils/tool";
import voiceCheckApi from "@/api/qc/voice/check/voiceCheckApi";
import {required} from "@/utils/formRules";
import CompanySelect from "@/components/Tjzy/Company/CompanySelect.vue";
import complaintApi from "@/api/tjzy/complaint/complaintApi";

const emit = defineEmits({successful: null})
const visible = ref(false);
const audioUrl = ref();
const aiReason = ref();

const isStop = ref(false);
const messageList = ref([]);
const callRecord = ref({
	callId: undefined,
	callee: undefined,
	agentNum: undefined,
	userName: undefined,
	deptName: undefined,
	callTypeName: undefined
});

const saveApproveStatusLoading = ref(false);

const qualityFormData = ref({
	id: undefined,
	qualityApproveStatus: undefined,
	qualityApproveRemark: undefined
})
const qualityApproveDisabled = ref(false);

const supervisorFormData = ref({
	id: undefined,
	supervisorApproveStatus: undefined,
	supervisorApproveRemark: undefined
})
const supervisorApproveDisabled = ref(false);

const voiceCheckStatusOptions = tool.dictList('voiceCheckStatus')
const complaintsImportanceOptions = tool.dictList('complaintsImportance')

const headerHeight = 120;
const footerHeight = 60;
const calcAiBoxHeight = computed(() => {
	return `calc(100vh - ${114}px)`;
});
const calcLeftBoxHeight = computed(() => {
	return `calc(100vh - ${headerHeight + footerHeight}px)`;
});

const resetProject = ref(false)
const modalVisible = ref(false);
const modalFormRef = ref()
const modalFormData = ref({
	mobile: undefined,
	complainImportant: undefined,
	projectCode: undefined,
	complainContent: undefined
})
const modalFormRules = {
	complainImportant: [required('请选择重要程度')],
	projectCode: [required('请选择所属项目')],
	complainContent: [required('请输入投诉内容')]
}
// 打开抽屉
const onOpen = (record) => {
	setFormData(record)
	modalFormData.value.mobile = record.liaisonPhone
	visible.value = true;
	audioUrl.value = record.fileUrl;
	aiReason.value = record.aiReasonContent;
	//查询语音文本
	voiceTextApi.getTextByCallId(record.callId).then((res) => {
		messageList.value = res;
	});
	//查询话单
	htApi.callRecordPage({
		current: 1,
		size: 1,
		beginTime: '2024-10-01 00:00:00',
		endTime: '2025-02-06 23:59:59',
		callId: record.callId
	}).then(res => {
		if (res && res.records && res.records[0]) {
			callRecord.value = res.records[0];
			callRecord.value.userName = record.userName;
			callRecord.value.deptName = record.deptName;
		}
	})
};

// 关闭抽屉
const onClose = () => {
	visible.value = false;
	stopAudio();
};

// 停止音频播放
const stopAudio = () => {
	isStop.value = true;
	setTimeout(() => {
		isStop.value = false;
	}, 500);
};

const setFormData = (record) => {
	qualityFormData.value.id = record.id;
	qualityFormData.value.qualityApproveStatus = record.qualityApproveStatus;
	qualityFormData.value.qualityApproveRemark = record.qualityApproveRemark;
	qualityApproveDisabled.value = record.qualityApproveStatus != null && record.qualityApproveStatus > 0
	supervisorFormData.value.id = record.id;
	supervisorFormData.value.supervisorApproveStatus = record.supervisorApproveStatus;
	supervisorFormData.value.supervisorApproveRemark = record.supervisorApproveRemark;
	supervisorApproveDisabled.value = record.supervisorApproveStatus != null && record.supervisorApproveStatus > 0
}

const saveApproveStatus = (type) => {
	saveApproveStatusLoading.value = true;
	let obj = {}
	if (type === 'quality') {
		obj = qualityFormData.value
	}
	if (type === 'supervisor') {
		obj = supervisorFormData.value
	}
	voiceCheckApi.modifyViolationStatus(obj).then((res) => {
		onClose()
		emit('successful')
		saveApproveStatusLoading.value = false
	})
}

const changeCompanySelectEvent = (val) => {
	modalFormData.value.projectCode = val.projectCode
}

const handleOk = () => {
	complaintApi.blackoutCustomers(modalFormData.value).finally((res) => {
		handleClose();
	})
}

const handleClose = () => {
	modalFormRef.value.resetFields();
	resetProject.value = true;
	setTimeout(() => {
		resetProject.value = false
	}, 200)
	modalVisible.value = false;
}

// 暴露方法供父组件调用
defineExpose({
	onOpen
});
</script>

<style scoped>
.lt-box {
	margin-bottom: 10px;
}

.lb-box {
	overflow-y: auto;
	padding: 10px;
	border: 1px solid #ccc;
}

.message {
	margin-bottom: 10px;
}

.position-left {
	text-align: left;
	margin-right: auto;
}

.position-right {
	text-align: right;
	margin-left: auto;
}

.sys-header {
	color: #ff4d4f;
}

.user-header {
	color: #1890ff;
}

.sys-text-box {
	background-color: #00ff80;
	max-width: 70%;
	margin-left: auto;
	border-radius: 5px;
	padding: 5px;
}

.user-text-box {
	background-color: #ffffff;
	border: 1px solid #ddd;
	max-width: 70%;
	margin-right: auto;
	border-radius: 5px;
	padding: 5px;
}

/* 自定义滚动条样式 */
.lb-box::-webkit-scrollbar {
	width: 8px;
}

.lb-box::-webkit-scrollbar-track {
	background: #f1f1f1;
}

.lb-box::-webkit-scrollbar-thumb {
	background: #888;
	border-radius: 4px;
}

.lb-box::-webkit-scrollbar-thumb:hover {
	background: #555;
}

</style>
